<template>
	<view class="big">
		<view class="top">
			<navigator url="/pages/index/search" class="top_kuang flexs1">
				<image src="../../static/image/search.png" class="border_serch" />
				<input disabled="true" style="font-size: 28rpx;color: rgb(153, 153, 153);" type="text" value=""
					placeholder="输入真题、资料、公司名称" />
			</navigator>
			<view class="banner">
				<swiper class="screen-swiper round-dot" :indicator-dots="false" circular :current="topSwiperIndex"
					:autoplay="true" :interval="3000" :duration="1000" @change="topSwiperTab">
					<swiper-item v-for="(item,index) in bannerList" :key="index" @click="navkechange(item.type,item.content_id,item.is_buy)">
							<image :src="picture.getImgUrl(item.image)" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<block class="number">
					<view class="u-indicator-item-number">{{topSwiperIndex + 1}}/{{bannerList.length}}</view>
				</block>
			</view>
			<view class="class_box flexs1">
				<navigator class="class_list text-center" v-for="(item,index) in list" :key="index" :url="item.url">
					<image :src="item.icon" mode=""></image>
					<view>{{item.name}}</view>
				</navigator>
			</view>

		</view>
		<!-- 麦芒头条 -->
		<HeadLines :swiperList="swiperList"></HeadLines>
		
		<view class="middle">
			<view class="middle_top flexs2">
				<view class="flexs1">
					<view class="line"></view>
					<view class="remen">
						热门推荐
					</view>
				</view>
				<navigator class="top_right flexs1" url="/pages/copydata/copydata?bordernum=1">
					<view>查看更多</view>
					<image src="../../static/img/left.png" mode=""></image>
				</navigator>
			</view>
			<view class="remen_list flexs1">
				<view class="remen_one flexs1" v-for="(item,index) in coursenew" :key="index" @click="gotokecheng(item.id)">
					<image class="remen_img" :src="picture.getImgUrl(item.image)" mode=""></image>
					<view class="remen_right">
						<view class="remen_right_title text-bold">
							{{item.name}}
						</view>
						<view class="remen_right_mid flexs1">
							<image src="../../static/img/cef.png" mode=""></image>
							<view>{{item.buy_num}}已学习</view>
						</view>
						<view class="remen_right_bottom flexs1">
							<view class="money">
								<text class="fuhao">￥</text>
								{{item.now_price}}
							</view>
							<text class="look"></text>
						</view>
					</view>
				</view>
			</view>
			<view class="middle_top flexs2">
				<view class="flexs1">
					<view class="line"></view>
					<view class="remen">
						精彩课程
					</view>
				</view>
				<navigator class="top_right flexs1" url="/pages/copydata/copydata?bordernum=1">
					<view>查看更多</view>
					<image src="../../static/img/left.png" mode=""></image>
				</navigator>
			</view>
			<view class="cai_box">
				<view class="ca_list flexs1" v-for="(item,index) in  goodsnew">
					<image class="ca_img" :src="picture.getImgUrl(item.image)" mode=""></image>
					<view class="cai_right">
						<view class="cai_right_t">{{item.name}}</view>
						<view class=" flexs1">
							<view class="cai_bottom_left">
								<view class="remen_right_mid flexs1">
									<image src="../../static/img/cef.png" mode=""></image>
									<view class="">{{item.buy_num}}已学习</view>
								</view>
								<view class="money">
									<text class="fuhao">￥</text>
									{{item.now_price}}
								</view>
							</view>
							<view class="button flexs" @click="gotokecheng(item.id)">立即抢购</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 课程 -->
		<view class="ke_box">
			<view class="ke_top flexs3">
				<view class="ke_list" @click="navIndex = 1">
					<view :class="navIndex == 1?'ke_title_new':'ke_title'">笔试课程</view>
					<view :class="navIndex == 1?'ke_line':'ke_line_dis'"></view>
				</view>
				<view class="ke_list" @click="navIndex = 2">
					<view :class="navIndex == 2?'ke_title_new':'ke_title'">面试课程</view>
					<view :class="navIndex == 2?'ke_line':'ke_line_dis'"></view>
				</view>
				<view class="ke_list" @click="navIndex = 3 	">
					<view :class="navIndex == 3?'ke_title_new':'ke_title'">助攻辅导</view>
					<view :class="navIndex == 3?'ke_line':'ke_line_dis'"></view>
				</view>
			</view>
			<view class="ke_list_big flexs12" v-if="navIndex==1">
				<view class="list_big_one" v-for="(item,index) in writculum" :key="index">
					<image class="feng_img" :src="picture.getImgUrl(item.image)" mode=""></image>
					<view class="ke_name">{{item.name}}</view>
					<view class="remen_right_mid flexs1">
						<image src="../../static/img/cef.png" mode=""></image>
						<view>{{item.buy_num}}已学习</view>
					</view>
					<view class="money">
						<text class="fuhao">￥</text>
						{{item.now_price}}
					</view>
				</view>
			</view>
			<view class="ke_list_big flexs12" v-if="navIndex==2">
				<view class="list_big_one" v-for="(item,index) in ntercgram" :key="index">
					<image class="feng_img" :src="picture.getImgUrl(item.image)" mode=""></image>
					<view class="ke_name">{{item.name}}</view>
					<view class="remen_right_mid flexs1">
						<image src="../../static/img/cef.png" mode=""></image>
						<view>{{item.buy_num}}已学习</view>
					</view>
					<view class="money">
						<text class="fuhao">￥</text>
						{{item.now_price}}
					</view>
				</view>
			</view>
			<view class="ke_list_big flexs12" v-if="navIndex==3">
				<view class="list_big_one" v-for="(item,index) in Assring" :key="index">
					<image class="feng_img" :src="picture.getImgUrl(item.image)" mode=""></image>
					<view class="ke_name">{{item.name}}</view>
					<view class="remen_right_mid flexs1">
						<image src="../../static/img/cef.png" mode=""></image>
						<view>{{item.watch_num}}已学习</view>
					</view>
					<view class="money">
						<text class="fuhao">￥</text>
						{{item.price}}
					</view>
				</view>
			</view>
			<view class="more_box flexs3" @click="moreclass">
				<view>查看更多</view>
				<image src="../../static/img/left.png" mode=""></image>
			</view>
		</view>
		<!-- 麦芒头条 -->
		<HeadLines :swiperList="swiperList1"></HeadLines>
		
		<view class="topic_box">
			<view class="middle_top flexs2">
				<view class="flexs1">
					<view class="line"></view>
					<view class="remen">
						热门话题
					</view>
				</view>
				<navigator url="/pages/topic/topic" class="top_right flexs1">
					<view>查看更多</view>
					<image src="../../static/img/left.png" mode=""></image>
				</navigator>
			</view>
			<view class="topic_list" v-for="(item,index) in topic" :key="index" @click="gototopicdetail(item.id)">
				<view class="topic_name">{{item.info}}</view>
				<view class="topic_img flexs1">
					<image v-for="i in item.images" :key="i" :src="picture.getImgUrl(i)" mode=""></image>
				</view>
				<view class="topic_bottom flexs3">
					<view class="bottom_list flexs1">
						<image class="ping_img" src="../../static/img/info.png" mode=""></image>
						<view>{{item.cmt_nums}}</view>
					</view>
					<view class="bottom_list flexs1">
						<image class="ping_img" src="../../static/img/goods.png" mode=""></image>
						<view>{{item.zan_nums}}</view>
					</view>
					<view class="bottom_list flexs1">
						<image class="ping_img" src="../../static/img/look.png" mode=""></image>
						<view>{{item.read_nums}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="paper_box">
			<view class="middle_top flexs2">
				<view class="flexs1">
					<view class="line"></view>
					<view class="remen">
						热门试卷
					</view>
				</view>
				<navigator url="/pages/copyBrush/copyBrush" class="top_right flexs1">
					<view>查看更多</view>
					<image src="../../static/img/left.png" mode=""></image>
				</navigator>
			</view>
			<view class="paper_list flexs2" v-for="(item,index) in hotpaper" :key="index" @click="gotoshiti(item.id,item.is_buy)">
				<view class="paper_name">{{item.name}}</view>
				<view class="number">{{item.answer_num}}人做过</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		banner,
		headlines,
		headlines1,
		coursenew,
		Assring,
		topic,
		paper,
		payother
	} from '../../api/index.js'
	import {
		lists
	} from '@/utils/data.js'
	import Headlines from '@/pages/index/swiper-headlines.vue'
	export default {
		components:{
			HeadLines:Headlines
		},
		data() {
			return {
				topSwiperIndex: 0,
				//轮播图
				bannerList: [],
				//麦芒求职
				swiperList: [],
				//麦芒求职1
				swiperList1: [],
				//热门推荐
				coursenew: [],
				//精彩课程
				goodsnew: [],
				//笔试课程
				writculum: [],
				//面试课程
				ntercgram: [],
				//助攻辅导
				Assring: [],
				//热门话题
				topic: [],
				//选项卡切换
				navIndex: 1,
				//热门试卷
				hotpaper: [],
				list: []
			}
		},
		onLoad() {
			console.log(banner())
			banner().then((res) => {
				this.list = lists
				this.bannerList = res.data;
			})
			headlines().then((res) => {
				this.swiperList = res.data;
			})
			headlines1().then((res) => {
				this.swiperList1 = res.data;
			})
			coursenew().then((res) => {
				console.log(res)
				for (var i = 0; i < res.data.length; i++) {
					//判断课程是否热门
					if (res.data[i].is_hot == 1) {
						this.coursenew.push(res.data[i])
					}
					//判断课程是否精彩
					if (res.data[i].is_good == 1) {
						this.goodsnew.push(res.data[i])
					}
					//判断是否是笔试课程
					if (res.data[i].type == 1) {
						let list = []
						list.push(res.data[i])
						console.log(list);
						for (var j = 0; j < list.length; j++) {
							if (list[j].is_index == 1) {
								this.writculum.push(list[j])
							}
						}
					}
					//判断是否是面试课程
					if (res.data[i].type == 2) {
						let list = []
						list.push(res.data[i])
						for (var j = 0; j < list.length; j++) {
							if (list[j].is_index == 1) {
								this.ntercgram.push(list[j])
							}
						}
					}
				}
			})
			Assring().then((res) => {
				this.Assring = res.data
			})
			topic({
				page: 1,
				pageSize: 10,
				type: 2
			}).then((res) => {
				this.topic = res.data
				// for(var i=0;i<res.data.length;i++){
				// 	//热门话题
				// 	if(res.data[i].is_hot ==2){
				// 		this.topic.push(res.data[i])
				// 		console.log(this.topic)
				// 	}
				// }
			})
			paper().then((res) => {
				this.hotpaper = res.data
				console.log(this.hotpaper)
			})
		},
		methods: {
			topSwiperTab(e) {
				var that = this;
				this.topSwiperIndex = Number(e.target.current);
			},
			//资料跳转
			moreclass(){
				uni.navigateTo({
					url:'/pages/copydata/copydata?bordernum='+ this.navIndex
				})
			},
			//详情跳转
			navkechange(type,content_id,is_buy){
				// 跳转类型type:1=课程,2=试题
				// 跳转id:content_id
				if(type == 1){
					uni.navigateTo({
						url:'../data/kecheng?id='+content_id
					})
				}else{//试题就判断买没买
					if(is_buy==1){
						// console.log(889)
						uni.navigateTo({
							url:'../Brush/testDetL?id='+content_id
						})
					}else{//判断试题
						var obj = {
							type:2,
							q_id:content_id
						};
						payother(obj).then(res => {
							if (res.code == 1) {
								this.ordernum=res.data.id
								this.price=res.data.price
								this.orderSn=res.data.order_sn
									uni.navigateTo({
										url:'../payment/payment?oid='+this.ordernum+'&price='+this.price+'&id='+content_id+'&orderSn='+this.orderSn+ '&payment=false'
									})
							}
						});
					}
				}
			},
			gotokecheng(id){
				uni.navigateTo({
					url:`/pages/data/kecheng?id=${id}`
				})
			},
			gototopicdetail(id){
				uni.navigateTo({
					url:`/pages/topic/topicdetail?id=${id}`
				})
			},
			gotoshiti(id,is_buy){
				if(is_buy == 1){
					uni.navigateTo({
						url:`/pages/Brush/testDetL?id=${id}`
					})
				}else{
					var obj = {
						type:2,
						q_id:id
					};
					payother(obj).then(res => {
						if (res.code == 1) {
							this.ordernum=res.data.id
							this.price=res.data.price
							this.orderSn=res.data.order_sn
								uni.navigateTo({
									url:'../payment/payment?oid='+this.ordernum+'&price='+this.price+'&id='+id+'&orderSn='+this.orderSn+ '&payment=false'
								})
						}else{
							this.$msg(res.msg)
						}
					});
				}
				
			}
		},
	}
</script>

<style lang="scss" scoped>
	.big {
		width: 100%;
		height: 100%;

		.top {
			width: 750rpx;
			height: auto;
			background: #fff;
			padding-bottom: 6rpx;
			margin-bottom: 20rpx;
			padding-top: 16rpx;

			.top_kuang {
				width: 690rpx;
				height: 60rpx;
				background: #f5f5f5;
				border-radius: 10rpx;
				margin: 0 auto;

				.border_serch {
					width: 28rpx;
					height: 30rpx;
					margin: 0 20rpx 0 24rpx;

				}

			}



			.banner {
				width: 674rpx;
				height: 312rpx;
				margin: 0 auto;
				margin-top: 44rpx;
				background-image: url(/h5/static/img/sy_img_br_bg@2x.1bad1671.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				position: relative;

				.round-dot {}

				uni-swiper {
					height: 284rpx;
				}
			}

			.class_box {
				width: 674rpx;
				height: auto;
				margin: 0 auto;
				flex-wrap: wrap;
				margin-top: 10rpx;

				.class_list {
					width: 134rpx;
					height: 168rpx;
					font-size: 24rpx;

					image {
						width: 104rpx;
						height: 104rpx;
						border-radius: 50%;
					}
				}

				.text-center {
					text-align: center;
				}
			}
		}

		.notice_box {
			width: 750rpx;
			height: 140rpx;
			background: #fff;
			margin-bottom: 20rpx;

			image {
				width: 120rpx;
				height: 120rpx;
				margin: 0 22rpx 0 28rpx;
			}

			.topbottombox {
				margin-left: 40rpx;
				width: 640rpx;
				height: 60rpx;

				.swiper {
					height: 70rpx !important;

					.swiper-item {
						height: 80rpx !important;
						padding: 10rpx 0;
						line-height: 60rpx !important;
						display: flex;
						align-items: center;
						justify-content: flex-start;

						.swiper-item-left {
							width: auto;
							padding: 0 14rpx;
							height: 36rpx;
							background: #ff3b30;
							border-radius: 4rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							color: #fff;
							font-size: 22rpx;
							margin-right: 24rpx;
						}

						.swiper-item-right {
							width: 400rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap
								/*溢出不 */
							;
						}
					}
				}
			}
		}

		.middle {
			width: 750rpx;
			height: auto;
			background: #fff;
			margin-bottom: 20rpx;



			.remen_list {
				width: 95%;
				height: 200rpx;
				overflow-x: scroll;
				margin-left: 38rpx;
				margin-bottom: 10rpx;

				.remen_one {
					width: 514rpx;
					height: 170rpx;
					background: #fff;
					box-shadow: 0rpx 2rpx 10rpx 0rpx rgb(216, 216, 215);
					border-radius: 10rpx;
					flex-shrink: 0;
					margin-right: 20rpx;

					.remen_img {
						width: 196rpx;
						height: 130rpx;
						border-radius: 10rpx;
						margin: 0 20rpx 0 20rpx;
					}

					.remen_right {
						height: 140rpx;

						.remen_right_title {
							width: 256rpx;
							height: 40rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}

						.text-bold {
							font-weight: 700;
						}

						.remen_right_mid {
							height: 50rpx;
							font-size: 24rpx;
							color: #666;

							image {
								width: 28rpx;
								height: 26rpx;
								margin-right: 10rpx;
							}
						}

						.remen_right_bottom {
							height: 60rpx;

							.money {
								width: 124rpx;
								font-size: 34rpx;
								font-weight: 700;
								color: #ff3b30;

								.fuhao {
									font-size: 24rpx;
								}
							}
						}
					}
				}
			}

			.cai_box {
				width: 92%;
				margin: 0 auto;
				height: auto;

				.ca_list {
					width: 100%;
					height: 170rpx;
					margin-bottom: 20rpx;

					.ca_img {
						width: 196rpx;
						height: 130rpx;
						border-radius: 10rpx;
						margin: 0 20rpx 0 20rpx;
					}

					.cai_right {
						.cai_right_t {
							width: 464rpx;
							font-weight: 700;
							color: #333;
						}

						.cai_bottom_left {
							width: 340rpx;

							.remen_right_mid {
								height: 50rpx;
								font-size: 24rpx;
								color: #666;

								image {
									width: 24rpx;
									height: 26rpx;
									margin-right: 10rpx;
								}
							}

							.money {
								width: 124rpx;
								font-size: 34rpx;
								font-weight: 700;
								color: #ff3b30;

								.fuhao {
									font-size: 24rpx;
								}
							}
						}

						.button {
							width: 130rpx;
							height: 50rpx;
							background: #ffdd47;
							border-radius: 6rpx;
							font-size: 24rpx;
						}
					}
				}
			}
		}

		.ke_box {
			width: 750rpx;
			height: auto;
			padding-bottom: 40rpx;
			margin-bottom: 20rpx;
			background: #fff;

			.ke_top {
				width: 85%;
				height: 100rpx;
				margin: 0 auto;

				.ke_list {
					width: 150rpx;

					.ke_title {
						height: 46rpx;
						line-height: 46rpx;
						text-align: center;
						font-size: 30rpx;
					}

					.ke_title_new {
						height: 46rpx;
						line-height: 46rpx;
						font-size: 32rpx;
						font-weight: 700;
						text-align: center;
					}

					.ke_line {
						width: 60rpx;
						height: 4rpx;
						background: #ffdd47;
						border-radius: 2rpx;
						margin-left: 48rpx;
					}

					.ke_line_dis {
						display: none;
					}
				}
			}

			.ke_list_big {
				width: 688rpx;
				height: auto;
				margin: 0 auto;
				flex-wrap: wrap;

				.list_big_one {
					width: 330rpx;
					height: auto;
					margin-bottom: 20rpx;

					.feng_img {
						width: 330rpx;
						height: 200rpx;
						border-radius: 10rpx;
					}

					.ke_name {
						width: 330rpx;
						height: 76rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.remen_right_mid {
						height: 50rpx;
						font-size: 24rpx;
						color: #666;

						image {
							width: 28rpx;
							height: 26rpx;
							margin-right: 10rpx;
						}
					}

					.money {
						width: 124rpx;
						font-size: 34rpx;
						font-weight: 700;
						color: #ff3b30;

						.fuhao {
							font-size: 24rpx;
						}
					}
				}
			}

			.more_box {
				width: 150rpx;
				height: 46rpx;
				background: #f2f2f2;
				border-radius: 22rpx;
				margin: 0 auto;
				color: #666;
				font-size: 22rpx;
				padding: 0 14rpx;
				margin-top: 15rpx;

				image {
					width: 12rpx;
					height: 22rpx;
				}
			}
		}

		.topic_box {
			width: 750rpx;
			height: auto;
			background: #fff;
			margin-bottom: 20rpx;
			padding-bottom: 40rpx;

			.topic_list {
				width: 690rpx;
				height: auto;
				background: #fff;
				box-shadow: 0rpx 2rpx 10rpx 0rpx rgb(216, 216, 215);
				border-radius: 10rpx;
				margin: 0 auto;
				margin-bottom: 20rpx;
				padding: 30rpx 0;

				.topic_name {
					width: 636rpx;
					height: auto;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					margin: 0 auto;
					font-size: 26rpx;
					line-height: 40rpx;
					margin-bottom: 20rpx;
				}

				.topic_img {
					width: 636rpx;
					height: auto;
					margin: 20rpx auto;
					flex-wrap: wrap;

					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 10rpx;
						margin-right: 18rpx;
						margin-bottom: 18rpx;
					}
				}

				.topic_bottom {
					width: 636rpx;
					height: auto;
					margin: 0 auto;
					color: #666;
					font-size: 26rpx;

					.bottom_list {
						.ping_img {
							width: 28rpx;
							height: 26rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
		}

		.paper_box {
			width: 750rpx;
			height: auto;
			background: #fff;

			.paper_list {
				width: 690rpx;
				height: 86rpx;
				margin: 0 auto;
				border-bottom: 2rpx solid #f2f2f2;

				.paper_name {
					width: 504rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.number {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}

	.middle_top {
		width: 92%;
		height: 110rpx;
		margin: 0 auto;

		.line {
			width: 4rpx;
			height: 20rpx;
			background: #ffdd47;
			border-radius: 2rpx;
			margin-right: 10rpx;
		}

		.remen {
			font-size: 34rpx;
			font-weight: 700;
		}

		.top_right {
			font-size: 22rpx;
			color: #999;

			image {
				width: 12rpx;
				height: 22rpx;
				margin-left: 10rpx;
			}
		}
	}

	.screen-swiper {
		min-height: 284rpx !important;
		box-shadow: 0rpx 20rpx 14rpx -14rpx #5E5E5E;

		image {
			width: 100%;
			display: block;
			height: 100%;
			margin: 0;
			pointer-events: none;
			border-radius: 12rpx !important;
		}
	}

	/* 指示器样式 */
	.u-indicator-item-number {
		width: 60rpx;
		padding: 0rpx 10rpx;
		line-height: 1;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 100rpx;
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.8);
		position: absolute;
		buttom: 20rpx;
		bottom: 40rpx;
		right: 20rpx;
	}
</style>
